import React, { useEffect, useState } from 'react'
import { List, Typography } from 'antd';

import styles from './index.module.css'
import { getStyle } from 'antd/es/checkbox/style';

const data = [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.',
];


function Test02() {

    //当前点击的item
    const [curreItemIndex, setCurreItemIndex] = useState(-1);

    //[]空数组相当于componentDidMount
    useEffect(() => {
        initData()
        return () => {

        }
    }, []);

    function initData() {


    }

    function clickItem(i) {
        console.log('点击了item', i);
        setCurreItemIndex(i)
    }

    function getStyle(index) {
        console.log('getStyle', index);
        if (curreItemIndex === index) {
            return styles.item1
        } else {
            return styles.item
        }
    }



    return (
        <div>
            <div >
                <List
                    header={<div>Header</div>}
                    footer={<div>Footer</div>}
                    bordered
                    dataSource={data}
                    renderItem={(item, index) => (
                        <div className={getStyle(index)} onClick={() => (clickItem(index))}>
                            <Typography.Text mark>[ITEM]</Typography.Text> {item}
                        </div>
                    )}
                />
            </div>
        </div>
    )
}

export default Test02;
